<template>
    <view class="settle-container">
        <!--全选-->
        <view class="radio">
            <radio color="#ff93a7" :checked="isFullCheck" @click="FullSeOrReverseSe">全选</radio>
        </view>
        <!--合计-->
        <view class="total">
            合计:
            <text class="price">￥{{ Number(checkedTotalPrice).toFixed(2) }}</text>
        </view>
        <view class="settle" @click="settlement">
            <text>{{ checkedCount > 0 ? `结算(${checkedCount})` : '结算' }}</text>
        </view>

    </view>
</template>

<script>
    import {mapGetters, mapMutations, mapState} from "vuex"

    export default {
        computed: {
            ...mapGetters('cart', ['total', 'checkedCount', 'checkedTotalPrice']),
            ...mapState('user', ['addressList', 'token']),
            ...mapGetters('user',['deliveryAddress']),
            ...mapState('cart',['cartList']),
            isFullCheck() {
                return this.total === this.checkedCount
            }
        },
        name: "my-settle",
        data() {
            return {}
        },
        methods: {
            ...mapMutations('cart', ['updateAllGoodsState']),
            ...mapMutations('user',['updateRedirectInfo']),
            // 全选或反选处理事件
            FullSeOrReverseSe() {
                this.updateAllGoodsState(!this.isFullCheck)
            },
            // 订单结算
            settlement() {
                if (!this.checkedCount) return uni.$showMsg('请选择结算的商品哦！', 1500, 'none')
                if (!Object.keys(this.addressList).length) return uni.$showMsg('请选择您的收货地址哦！', 1500, 'none')
                if (!this.token || this.token === '') return this.showMyModal()
                this.payOrder()
            },
            showMyModal(){
                uni.showModal({
                    title: '温馨提示',
                    content: '检测到您处于未登录状态，是否去登录？',
                    confirmText: '去登录',
                    confirmColor: '#ff93a7',
                    cancelText: '拒绝',
                    success: (result) => {
                        if (result.confirm) return uni.switchTab({
                            url: '/pages/my/my',
                            success: () => {
                                this.updateRedirectInfo({
                                    openType:'switchTab',
                                    from:'/pages/cart/cart'
                                })
                            }
                        })
                    }
                })
            },
            async payOrder(){
               const orderInfo = {
                   // order_price: this.checkedTotalPrice,
                   order_price: 0.01,
                   consignee_addr: this.deliveryAddress,
                   goods: this.cartList.filter(item => item.goods_state).map(item => ({
                       goods_id: item.goods_id,
                       goods_number: item.goods_count,
                       goods_price: item.goods_price
                   }))
               }
               // 创建订单
                const res = await uni.$http.post('/api/public/v1/my/orders/create/',orderInfo)
                if (res.data.meta.status !== 200) return uni.$showMsg('创建订单失败')
                const orderNumber = res.data.message.order_number
                // 创建订单预支付
                const res2 = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number: orderNumber})
                if (res.data.meta.status !== 200) return uni.$showMsg('创建预付订单失败')
                const payInfo = res2.data.message.pay
                // 发起微信支付
                const [error, success] = await uni.requestPayment(payInfo)
                if (error) return uni.$showMsg('订单未支付')
                // 查询支付结果
                const res3 = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {order_number: orderNumber})
                if (res3.data.meta.status !== 200) return uni.$showMsg('订单未支付')
                uni.$showMsg('订单支付完成',1500,success)
            }
        },
    }
</script>

<style lang="scss">
    .settle-container {
        width: 100%;
        height: 100rpx;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        background-color: #FFFFFF;
        font-size: 15px;
        z-index: 999999;

        .total {
            .price {
                color: #cc0404;
                font-weight: bold;
            }
        }

        .settle {
            width: 100px;
            height: 100%;
            background-color: #ff93a7;
            text-align: center;
            line-height: 100rpx;
            color: #FFFFFF;
            opacity: 1;
            padding: 0 20rpx;
        }
    }
</style>